.category-main {
	font-size: 28rpx;
	background-color: #fff;
	.navigationBar-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		background-color: #fff;
		.search-wrap {
			margin: 0 20rpx;
			padding-bottom: 4rpx;
			height: 44px;
			.search-content {
				display: flex;
				align-items: center;
				width: 100%;
				height: 36px;
				background-color: #f2f2f7;
				border-radius: 28px;
				.search-icon {
					margin-left: 24rpx;
					margin-right: 16rpx;
					font-size: 36rpx;
					color: $base-text-color-grey;
				}
				.search-text {
					font-size: 28rpx;
					line-height: 28rpx;
					color: $base-text-color-grey;
				}
			}
		}
	}
	.menu-wrap {
		position: fixed;
		top: 44px;
		left: 0;
		bottom: var(--window-bottom);
		width: 200rpx;
		overflow: hidden;
		background-color: #f8f8f8;
		overscroll-behavior: contain;
		.menu-scroll-wrap {
			width: 215rpx;
			height: 100%;
			overscroll-behavior: contain;
			.tabs-item {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 26rpx;
				text-align: center;
			}
			.active-tab {
				position: relative;
				color: $base-color;
				font-size: 28rpx;
				font-weight: 700;
				background-color: #fff;
				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					width: 6rpx;
					height: 45%;
					transform: translateY(-50%);
					border-radius: 2rpx;
					background-color: $base-color;
				}
			}
		}
	}
	.content-wrap {
		margin-left: 200rpx;
		padding: 0 20rpx;
		.category-image {
			display: block;
			width: 100%;
			border-radius: 8rpx;
		}
		.goods-list {
			display: flex;
			flex-wrap: wrap;
			padding-top: 30rpx;
			.goods-item {
				flex: 0 0 33.3%;
				margin-bottom: 20rpx;
				text-align: center;
				.goods-content {
					.avatar {
						display: block;
						margin: 0 auto;
						width: 140rpx;
						height: 140rpx;
					}
					.name {
						font-size: 24rpx;
						color: $base-text-color;
					}
				}
			}
		}
	}
	
}